<template>
	<view class="gift">
		<h3 class="title">我的福利</h3>
		<view class="gift-item">
			<u-card
				v-for="(item, index) in card"
				:key="index"
				:show-head="false"
				:show-foot="false"
				class="item"
				box-shadow=" 0 0 30rpx rgba(204, 204, 204, 0.3)"
			>
				<view class="items" slot="body">
					<u-icon name="coupon-fill" size="50" :color="item.color"></u-icon>
					<text>{{ item.title }}</text>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			card: [
				{ title: '我的优惠券', color: this.$u.color['success'] },
				{ title: '领券中心', color: this.$u.color['warning'] }
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.title {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 35rpx;
	font-weight: bold;
}
.gift {
	.gift-item {
		width: 100%;
		display: flex;
		.item {
			flex: 1;
			.items {
				display: flex;
				align-items: center;
			}
			text {
				color: $u-content-color;
				margin: 0 10rpx;
			}
		}
	}
}
</style>
